<template>
	<view class="header">
		<view class="image-box">
			<image src="../../common/images/照片2.jpg" @click="ClickImage('../../common/images/照片2.jpg')"></image>
		</view>
		<view v-if="showNameContent" class="content">
			<text class="name">小米椒</text>
			<text class="zuoyouming">我喜欢读书看电影照相旅行</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	let showNameContent = ref(true)
	const props = defineProps(['showNameContent'])
	showNameContent.value = props.showNameContent ? props.showNameContent : showNameContent.value;

	const ClickImage = (imageUrl) => {
		uni.previewImage({
			urls: [imageUrl],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function (data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function (err) {
					console.log(err.errMsg);
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.header {
		margin-top: 10rpx;
		// border: 1px solid red;
		padding: 0 16rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		// justify-content: center;
		align-items: center;

		.image-box {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.content {
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;

			.name {
				font-size: 36rpx;
				font-weight: bold;
			}

			.zuoyouming {}
		}
	}
</style>